<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="销售明细" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>

    <div style="display: flex;background-color: white;height: 35px;padding-top: 5px;padding-left: 5px;">
      <div style="flex:1;margin-right: 5px;">
        <nut-input clearable placeholder="客户或商品关键字" v-model="searchModel.keyWord" @keydown.enter="quickSearch" />
      </div>
      <nut-button size="small" @click="quickSearch" text>搜索</nut-button>
      <nut-button size="small" style="margin-left: 5px;" @click="openAdvFilter" text>筛选</nut-button>
    </div>
    <div :style="{height: hei+'px'}" style="overflow:auto;">
      <fresh-load @action="action" url="app/getSaleDetail" :search-model="searchModel" ref="freshRef">
        <div class="item"
             v-for="(item, index) in state.list" :key="index"
        >
          <div style="display:flex;">
            <div style="flex:1;">{{ item.buName }}</div>
            <div style="width:80px;text-align:right;">{{ item.billDate }}</div>
          </div>
          <div style="display:flex;">
            <div style="flex:1;font-size:13px;color:rgba(0,0,0,0.5);">{{item.billNo}}</div>
            <div style="font-size:13px;">{{ item.send }}</div>
            <div style="margin-left:10px;" v-if="item.deduction">
              <span style="margin-right:5px;font-size:12px;">返</span>
              <nut-price :price="item.deduction" size="small"></nut-price></div>
          </div>
          <div style="display:flex;">
            <div style="flex:1;">{{ item.invName }}</div>
            <div style="margin-left:10px;">
              <nut-price :price="item.price" size="small"></nut-price>
            </div>
            <div style="margin-left:10px;">x <span style="font-size:16px;color: #1e9fff;">{{item.qty}}</span> {{item.unit}}</div>
          </div>
        </div>
      </fresh-load>
    </div>
    <advFilter ref="filterRef" @doSearch="doAdvSearch" />
  </div>
</template>

<script setup>
// 零售
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import advFilter from "./xsadvfilter.vue";
import {computed, ref} from "vue";
import FreshLoad from "@/components/freshLoad.vue";
import {useRouter} from "vue-router";
const global = useGlobal()
const searchModel = ref({
  searchType: 'quick',
  keyWord: '',
  beginDate: tool.getDay(),
  endDate: tool.getDay(),
})
const state = ref({
  active: 0,
  amount: '0.00',
  orders: 0,
  list: [],
})
const router = useRouter()
const freshRef = ref(null)
const filterRef = ref(null)
const title = computed(() => {
  return `${searchModel.value.beginDate} - ${searchModel.value.endDate}`
})
const hei = computed(() => {
  return window.innerHeight - 165
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
const action = (arr) => {
  state.value.list = arr
}
const clickLeft = () => {
 router.go(-1)
}
// 弹出搜索
const openAdvFilter = () => {
  filterRef.value.open()
}
// 高级搜索
const doAdvSearch = (model) => {
  searchModel.value.searchType = 'adv'
  searchModel.value = Object.assign(searchModel.value, model)
  getList()
}
// 快速搜索
const quickSearch = () => {
  searchModel.value.beginDate = tool.getDay()
  searchModel.value.endDate = tool.getDay()
  searchModel.value.searchType = 'quick'
  getList()
}

const getList = () => {
  freshRef.value.getList()
}



</script>

<style scoped lang="scss">
.item {
  margin: 0 5px 2px 5px;background-color:#fff;border:1px solid rgba(0,0,0,0.06);
  padding: 5px;border-radius: 4px;font-size:14px;color: rgba(0,0,0,0.7);
}
</style>